<!DOCTYPE html>
<html>
<head>
    <!-- Site made with Mobirise Website Builder v5.2.0, https://mobirise.com -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v5.2.0, mobirise.com">
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="../../assets/images/index-meta.jpg">
    <meta property="og:image" content="../../assets/images/index-meta.jpg">
    <meta name="twitter:title" content="Phantoms">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="https://img.picgo.net/2024/10/18/frame-1-121x121bc5d878c1dd0d5fc.png"
          onerror="this.onerror=null;this.src='./assets/images/frame-1-121x121.png';"
          type="image/x-icon">
    <meta name="description" content="FF14、FC/CWLS Phantomsのホームページです。">


    <title>User Registration</title>
    <link rel="stylesheet" href="../../assets/web/assets/mobirise-icons2/mobirise2.css">
    <link rel="stylesheet" href="../../assets/tether/tether.min.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="../../assets/dropdown/css/style.css">
    <link rel="stylesheet" href="../../assets/socicon/css/styles.css">
    <link rel="stylesheet" href="../../assets/theme/css/style.css">
    <link rel="preload" as="style" href="../../assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="../../assets/mobirise/css/mbr-additional.css" type="text/css">

    <!--  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">-->
    <link rel="stylesheet" href="../../assets/web/assets/fontawesome.css">
    <link rel="stylesheet" href="../../vedio/play_vedio.css">
    <link rel="stylesheet" href="../../additions/mouse.css">

    <style>
        .form-button-wrapper {
            display: flex;
            justify-content: center;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            padding: 20px;
        }

        h2 {
            color: #333;
            text-align: center;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="file"], input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        input[type="submit"] {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        #preview {
            max-width: 200px;
            max-height: 200px;
            margin: 10px auto;
            display: block;
        }

    </style>
</head>


<body>

<div id="menu"></div>
<script src="../../assets/web/assets/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#menu").load("../../additions/menu/menu3.html", function() {
            adjustLinks();
            window.addEventListener('resize', adjustLinks);
        });
    });
</script>

<section class="header1 cid-s48MCQYojq mbr-fullscreen" id="header1-f" >
    <div class="card-img-overlay" style="opacity:1; background-color: rgb(255, 255, 255);">
        <iframe src="../../additions/nest.html" frameborder="hide" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1"></iframe>
    </div>
    <div class="align-center container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <h2 class="mbr-section-title mbr-fonts-style mb-3 display-1"><strong>Upload Profile</strong></h2>
                <p class="mbr-text mbr-fonts-style display-7"><strong>上传头像</strong></p>

                <form action="/upload" method="post" enctype="multipart/form-data">

                    <div class="form-button-wrapper">
                        <table>
<!--                            <tr>-->
<!--                                <th><label for="uploaded_by">Username:</label></th>-->
<!--                                <th><input type="text" id="uploaded_by" name="uploaded_by" required></th>-->
<!--                            </tr>-->
                            <tr>
                                <th><label for="image">Image:</label></th>
                                <th><input type="file" id="image" name="image" accept="image/*" required></th>
                            </tr>
                        </table>
                    </div>
                    <img id="preview">
                    <div class="form-button-wrapper">
                        <input type="submit" value="Upload" class="btn btn-black display-4">
                    </div>
                </form>

                <br>
                <p class="mbr-text mbr-fonts-style display-7"><strong>Phantoms</strong>: Freecompany and Cross-world Linkshell</p>

                <script>
                    document.querySelector('form').addEventListener('change', function(event) {
                        var input = document.getElementById('image');
                        var preview = document.getElementById('preview');

                        if (input.files && input.files[0]) {
                            var reader = new FileReader();

                        //    reader.onload = function (e) {
                        //        preview.src = e.target.result;
                        //    };

                            cropMaxSquare(input.files[0]).then((croppedImage) => {
                                return compressImage(croppedImage, 512, 512);
                            }).then((compressedImage) => {
                                reader.readAsDataURL(compressedImage);
                                //var base64 = URL.createObjectURL(compressedImage);
                                reader.onloadend = function() {
                                    preview.src = reader.result;
                                };
                            })

                            reader.readAsDataURL(input.files[0]);
                        }
                    });

                    function compressImage(file, maxWidth, maxHeight) {
                        return new Promise((resolve, reject) => {
                            let img = new Image();
                            img.src = URL.createObjectURL(file);
                            img.onload = () => {
                                let width = img.width;
                                let height = img.height;

                                if (width > maxWidth || height > maxHeight) {
                                    let ratio = Math.max(width / maxWidth, height / maxHeight);
                                    width = Math.floor(width / ratio);
                                    height = Math.floor(height / ratio);
                                }

                                let canvas = document.createElement('canvas');
                                canvas.width = width;
                                canvas.height = height;
                                let ctx = canvas.getContext('2d');
                                ctx.drawImage(img, 0, 0, width, height);

                                canvas.toBlob((blob) => {
                                    resolve(blob);
                                }, 'image/jpeg', 0.8);
                            };
                            img.onerror = reject;
                        });
                    }

                    function cropMaxSquare(image) {
                        return new Promise((resolve, reject) => {
                            const img = new Image();
                            img.src = URL.createObjectURL(image);
                            img.onload = () => {
                                const width = img.width;
                                const height = img.height;
                                const size = Math.min(width, height);
                                const x = (width - size) / 2;
                                const y = (height - size) / 2;

                                const canvas = document.createElement('canvas');
                                canvas.width = size;
                                canvas.height = size;
                                const ctx = canvas.getContext('2d');
                                ctx.drawImage(img, x, y, size, size, 0, 0, size, size);

                                canvas.toBlob((blob) => {
                                    resolve(blob);
                                }, 'image/jpeg', 0.8);
                            };
                            img.onerror = reject;
                        });
                    }

                    function getCookie(name) {
                        var value = "; " + document.cookie;
                        var parts = value.split("; " + name + "=");
                        if (parts.length == 2) return parts.pop().split(";").shift();
                    }

                    // 显示遮罩层的函数
                    function showLoadingOverlay() {
                        const overlay = document.createElement('div');
                        overlay.id = "loadingOverlay"; // 添加一个 ID 方便后续操作
                        overlay.style.position = 'fixed';
                        overlay.style.top = '0';
                        overlay.style.left = '0';
                        overlay.style.width = '100%';
                        overlay.style.height = '100%';
                        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                        overlay.style.display = 'flex';
                        overlay.style.justifyContent = 'center';
                        overlay.style.alignItems = 'center';
                        overlay.style.zIndex = '9999';

                        const loadingText = document.createElement('div');
                        loadingText.style.color = 'white';
                        loadingText.style.fontSize = '20px';
                        loadingText.innerHTML = 'Operation in progress...<br><br>Please wait';

                        overlay.appendChild(loadingText);
                        document.body.appendChild(overlay);
                    }
                    // 隐藏遮罩层的函数
                    function hideLoadingOverlay() {
                        const overlay = document.getElementById("loadingOverlay");
                        if (overlay) {
                            document.body.removeChild(overlay);
                        }
                    }

                    // 修改表单提交逻辑
                    document.querySelector('form').addEventListener('submit', function(event) {
                        event.preventDefault();
                        showLoadingOverlay(); // 显示遮罩层

                        var image = document.getElementById('image').files[0];
                        var reader = new FileReader();
                        reader.onloadend = function() {
                            var data = reader.result;
                            //var uploaded_by = document.getElementById('uploaded_by').value;
                            var user_id = getCookie('user_id');

                            // Get the user's ID
                        //  fetch(`https://cnlchrq5g6hen2t5llr0.baseapi.memfiredb.com/rest/v1/users?select=*&user_id=eq.${user_id}`
                            fetch(`https://dshmbsawwrbuycnivcjs.supabase.co/rest/v1/users?select=*&user_id=eq.${user_id}`, {
                                method: 'GET',
                                headers: {
                                    //'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c',
                                    'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A',
                                    //'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c',
                                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A',
                                    'Content-Type': 'application/json',
                                    'Prefer': 'return=minimal'
                                }
                            })
                            .then(function(response) {
                                if (response.ok) {
                                    return response.json();
                                } else {
                                    throw new Error('Error: ' + response.statusText);
                                }
                            })
                            .then(function(userData) {
                                var legacyUserId = userData[0].id;
                                var uploaded_by = userData[0].username;

                                // Get the current username
                                var randomN = new Date().getTime();  // This will get the current time in milliseconds

                                // Create the image name
                                var name = randomN + '_profile';

                            //  fetch('https://cnlchrq5g6hen2t5llr0.baseapi.memfiredb.com/rest/v1/user_profile'
                                fetch('https://dshmbsawwrbuycnivcjs.supabase.co/rest/v1/user_profile', {
                                    method: 'POST',
                                    headers: {
                                        //'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c',
                                        'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A',
                                        //'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c',
                                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A',
                                        'Content-Type': 'application/json',
                                        'Prefer': 'return=minimal'
                                    },
                                    body: JSON.stringify({
                                        name: name,
                                        legacy_user_id: legacyUserId,
                                        data: data,
                                        uploaded_by: uploaded_by,
                                        user_id: getCookie('user_id')
                                    })
                                })
                                .then(function(response) {
                                    if (response.ok) {
                                        hideLoadingOverlay(); // 隐藏遮罩层
                                        alert('Image uploaded successfully');
                                        window.location.href = 'userListWithProfile_fromed.html';
                                    } else {
                                        throw new Error('Error: ' + response.statusText);
                                    }
                                })
                                .catch(function(error) {
                                    hideLoadingOverlay(); // 隐藏遮罩层
                                    console.error('Error:', error);
                                    alert('Failed to upload image. Please try again.');
                                });
                            });
                        };

                        cropMaxSquare(image).then((croppedImage) => {
                            compressImage(croppedImage, 100, 100).then((compressedImage) => {
                                reader.readAsDataURL(compressedImage);
                                //var base64 = URL.createObjectURL(compressedImage);
                            });
                        });
                    });
                </script>

            </div>
        </div>
    </div>
</section>

<section class="share3 cid-seeJd7VvmR" id="share3-o">
    <div class="container">
        <div class="media-container-row">
            <div class="col-12">
                <h3 class="mbr-section-title align-center mb-3 mbr-fonts-style display-2"><strong>Social Link</strong></h3>
                <div class="social-list align-center">
                    <a class="iconfont-wrapper bg-success m-2" href="https://jq.qq.com/?_wv=1027&k=FSun33H0" target="_blank">
                        <span class="socicon-qq socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper bg-youtube m-2" href="https://weibo.com/5722698883/LnwkL1Fk2" target="_blank">
                        <span class="socicon-weibo socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper bg-twitch m-2" href="https://kaihei.co/Pz0Q4r" target="_blank">
                        <span class="socicon-discord socicon"></span>
                    </a>
                    <a class="iconfont-wrapper bg-info m-2" href="https://github.com/YukiRinLL/FFXIV_Phantoms_MainPage" target="_blank">
                        <span class="socicon-github socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="footer7 cid-seeJHoNSny" once="footers" id="footer7-p">


    <div class="container">
        <div class="media-container-row align-center mbr-white">
            <div class="col-12">
                <p class="mbr-text mb-0 mbr-fonts-style display-7">Copyright (C) SQUARE ENIX CO., LTD. All Rights Reserved.<br>Copyright&nbsp;(C) Crystal Alliance cir. All Rights Reserved.
                </p>
            </div>
        </div>
    </div>
</section>

<section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: flex;"><a href="https://mobirise.site/n" style="flex: 1 1; height: 3rem; padding-left: 1rem;"></a><p style="flex: 0 0 auto; margin:0; padding-right:1rem;">Page was <a href="https://mobirise.site/g" style="color:#aaa;">designed</a> with Mobirise</p></section><script src="../../assets/web/assets/jquery/jquery.min.js"></script>  <script src="../../assets/popper/popper.min.js"></script>  <script src="../../assets/tether/tether.min.js"></script>  <script src="../../assets/bootstrap/js/bootstrap.min.js"></script>  <script src="../../assets/smoothscroll/smooth-scroll.js"></script>  <script src="../../assets/ytplayer/jquery.mb.ytplayer.min.js"></script>  <script src="../../assets/vimeoplayer/jquery.mb.vimeo_player.js"></script>  <script src="../../assets/dropdown/js/nav-dropdown.js"></script>  <script src="../../assets/dropdown/js/navbar-dropdown.js"></script>  <script src="../../assets/touchswipe/jquery.touch-swipe.min.js"></script>  <script src="../../assets/theme/js/script.js"></script>

</body>


<footer>

    <!--回到顶部按钮-->
    <!--Yuki:20190724-->
    <style>
        .box{
            position:fixed;
            right:20px;
            bottom: 480px;
            height:50px;
            width: 50px;
            text-align:center;
            padding-top:20px;
            background-color: black;
            border-radius: 20%;
            overflow: hidden;
        }.box:hover:before{
             top:50%
         }.box:hover .box-in{
              visibility: hidden;
          }.box:before{
               position: absolute;
               top: -50%;
               left: 50%;
               transform: translate(-50%,-50%);
               content:'TOP';
               width: 40px;
               color:white;
               font-weight:bold;
           }.box-in{
                visibility: visible;
                display:inline-block;
                height:20px;
                width: 20px;
                border: 3px solid black;
                border-color: white transparent transparent white;
                transform:rotate(45deg);
            }
    </style>
    <div id="box" class="box">
        <div class="box-in"></div>
    </div>
    <script>
        var timer  = null;
        box.onclick = function(){
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(
                function fn(){
                    var oTop = document.body.scrollTop || document.documentElement.scrollTop;
                    if(oTop > 0){
                        document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                        timer = requestAnimationFrame(fn);
                    }
                    else{
                        cancelAnimationFrame(timer);
                    }
                }
            );
        }
    </script>

    <!--更改网页标题-->
    <!--Yuki:20190724-->
    <title>标题</title>
    <script>
        document.title = '(ノ￣▽￣) Phantoms !'
    </script>
    <!--网页标题(title)动态改变-->
    <!--离开和回到当前页 网页标题改变-->
    <script>
        window.onload = function () {
            var OriginTitile = document.title;
            var titleTime;
            document.addEventListener('visibilitychange', function () {
                if (document.hidden) {
                    //$('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");
                    document.title = '( * ￣▽￣)／肿么不看了呢？';
                    clearTimeout(titleTime);
                }
                else {
                    //$('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");
                    // document.title = '(～￣▽￣)～咦！又开始看了！' + OriginTitile;
                    document.title = '(～￣▽￣)～咦！又开始看了！';
                    titleTime = setTimeout(function () {
                        document.title = OriginTitile;
                    }, 2000);
                }
            });
        }
    </script>

    <!--text click effect-->
    <!--Yuki:20190724-->
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = new Array("Astral","Umbral","Arcanum","Polyglot","Transcendent","Material","Original","Xenogeneic","Etheral","Sin" ,"Missionary","Requiem","Clement","Cristal","Zodiac");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function() {
                        $i.remove();
                    });
            });
        });
    </script>

</footer>


<!--<div id="foot"></div>-->
<!--<script src="../../assets/web/assets/jquery/jquery.min.js"></script>-->
<!--<script>-->
<!--    $(document).ready(function () {-->
<!--        $("#foot").load("../../additions/foot/profile-round.html");-->
<!--    });-->
<!--</script>-->

</html>

